import { useState, useEffect } from 'react'
import router from 'umi/router'
import { List, Radio, WhiteSpace, WingBlank, Button } from 'antd-mobile'
import { Typography } from 'antd'
import api from '@/services'
import { mapQuery } from '@/utils'
import styles from './index.scss'

const { SBItems } = api

const RadioItem = Radio.RadioItem
const { Title, Paragraph } = Typography
export default () => {
  const { type } = mapQuery()
  const [checked, setChecked] = useState(null)
  const [options, setOptions] = useState([])
  const [note, setNote] = useState(null)

  useEffect(() => {
    const openId = localStorage.getItem('openId')
    const data = {
      openId,
      departmentId: 0
    }
    SBItems({
      sign: `${JSON.stringify(data)}$$##1234ech**`.MD5(32),
      data
    })
      .then(res => {
        console.log('事项清单', res)
        if (res.success) {
          setOptions(res.data)
        }
      })
  }, [])

  const onRadioChange = i => {
    setChecked(i.itemId)
    setNote(i.note)
  }

  const onNextClick = () => {
    router.push(type === '1' ? `/confirm?itemId=${checked}` : `/branchs?itemId=${checked}`)
  }
  return (
    <>
      <List renderHeader={() => '请选择您要办理的业务'}>
        {
          options.map(i => (
            <RadioItem key={i.itemId} checked={checked === i.itemId} onChange={() => onRadioChange(i)}>
              {i.itemName}
            </RadioItem>
          ))
        }
      </List>
      <WhiteSpace />
      <WhiteSpace />
      <WingBlank>
        {
          note &&
          <Typography>
            <Title level={4} className={styles.left}>介绍</Title>
            <Paragraph className={styles.left}>
              {
                note
              }
            </Paragraph>
          </Typography>
        }
        <WhiteSpace />
        <Button type='primary' disabled={!checked} onClick={onNextClick}>下一步</Button>
      </WingBlank>
    </>
  )
}